<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>模板语法</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <div id="root">
      <h1>{{name}}</h1>
      <h1> 指令语法</h1>
      <a v-bind:href="url"> 点我去百度</a>
<!--     1. 一旦使用v-绑定那么 "" 中的内容就是一个表达式-->
      <a :href="url" >  点我去百度</a> <!-- v-bind 简写为 :-->
      <br/>
<!--     2.数据绑定-->
<!--      v-bind 单项绑定-->
      <input type="text" v-bind:value="name" /><br/>
<!--      v-model 双向绑定 只能用在表单类元素上 共同点是 都有value-->
      <input type="text" v-model:value="name">
      <input type="text" v-model="name"> <!--简写-->
  </div>


</body>
<script type="text/javascript">
    Vue.config.productionTip =false
    new Vue({
        el:"#root",
        data:{
            name: "hello",
            url: 'http://www.baidu.com'

        }
    })
</script>

</html>
